<template>
  <view class="container gray_bg repair_main">
    <tm-tabs @change="tabschange" :_class="['tab_bar']"  showTabsLineAni :list="tabsTitle" :width="750" default-name="1" itemModel="line" tabs-line-ani-color="primary" activeFontColor="#333333"></tm-tabs>
    <view class="repair_list">
      <view class="repair_title">
        <text class="title_text">当前工单</text>
        <text class="title_sub_text">（{{orderList.length}}条）</text>
      </view>
      <view v-if="orderList.length > 0" class="order_list">
        <view v-for="item in orderList" :key="item.id" class="order_section" @click="() => checkOrderDetail(item)">
          <tm-sheet :margin="[0, 20]" :round="3" :shadow="2">
            <view class="order_list_head">
              <view>
                <tm-tag v-if="item.step === 1" text color="#165DFF" size="m" :label="item.step_text"></tm-tag>
                <tm-tag v-if="item.step === 2" text color="#F76500" size="m" :label="item.step_text"></tm-tag>
                <tm-tag v-if="item.step === 3" text color="#00B6B5" size="m" :label="item.step_text"></tm-tag>
                <tm-tag v-if="item.step === 6" text color="#00B42A" size="m" :label="item.step_text"></tm-tag>
                <tm-tag v-if="item.step === 7" text color="#88929E" size="m" :label="item.step_text"></tm-tag>
              </view>
              <view>{{moment(item.created_at).format('YYYY-MM-DD HH:mm')}}</view>
            </view>
            <view class="order_list_bd">
              <view class="cus_item">
                <view class="cus_item_label">工单来源</view>
                <view class="cus_item_value">{{renderData(repaiFormOptions ,item.repair_form)}}</view>
              </view>
              <view class="cus_item">
                <view class="cus_item_label">报修类型</view>
                <view class="cus_item_value">{{item.repair_type_text}}</view>
              </view>
              <view class="cus_item">
                <view class="cus_item_label">故障描述</view>
                <view class="cus_item_value">{{item.description}}</view>
              </view>
              <view class="cus_item">
                <view class="cus_item_label">上门时间</view>
                <view class="cus_item_value">{{item.order_start_date + ' ~' + moment(item.order_end_date).format('HH:mm') + '点'}}</view>
              </view>
              <view class="cus_item_block">
                <view class="cus_item_label">故障视频/照片</view>
                <view class="cus_item_value upload_file">
                  <!--                repair_imgs-->
                  <view v-for="(item,i) in item.repair_imgs_arr" class="upload_img">
                    <view class="img_inner">
                      <tm-image :src="`${urlApi}/${item}`"></tm-image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </tm-sheet>
        </view>

      </view>
      <view v-else class="no_data">
        <defaultGraph />
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import moment from 'moment'
import { getOrderList } from '@/api_request/api.ts'
import {storeToRefs} from "pinia";
import { useInfoStore } from '@/store/userInfo'
import {matchDictionaryName} from "@/utils/utils";
import {repaiFormOptions} from "@/utils/dictionary";
import {ASSETS_HOST} from '@/config'
import { onReachBottom } from '@dcloudio/uni-app';

const urlApi = ref<string>(ASSETS_HOST)

const userStore = useInfoStore()
const { userInfo } : any = storeToRefs(userStore)
console.log('jp======userInfo',userInfo)
const merchant_id = ref(userInfo.value.merchant_id) || 12
const community_id = ref(userInfo.value.community_id) || 1

const page_num = ref<number>(1)
const page_size = ref<number>(10)
const totalRows = ref<number>(0)

const tabsTitle = ref([
  { key: '1', orderState: '', title: '全部', dot: false, count: '0', dotColor: '#E8F3FF' },
  { key: '2', orderState: 1, title: '待接单', dot: false, count: '0', dotColor: '#E8F3FF' },
  { key: '3', orderState: 3, title: '处理中', dot: false, count: '0', dotColor: '#E8F3FF' },
  { key: '4', orderState: 6, title: '已完成', dot: false, count: '0', dotColor: '#E8F3FF'  },
  { key: '5', orderState: 7, title: '已取消', dot: false, count: '0', dotColor: '#E8F3FF' }
])

const orderList = ref<any[]>([])

const renderData = (dataArr, value) => {
  return matchDictionaryName(dataArr, value)
}
// 做下拉加载
const initData = (data?) => {
  console.log('jp======page_num.value',page_num.value)
  getOrderList({
    page_num: page_num.value, page_size: page_size.value, merchant_id: merchant_id.value, community_id: community_id.value,
    ...data
  }).then((res: any) => {
    console.log('jp======工单列表',res)
    orderList.value = res.data.list
    page_size.value = res.data.page_size
    totalRows.value = res.data.total_rows
    console.log('jp======orderList.value',orderList.value)
  //   统计
    const statistics = res.data.statistics
    tabsTitle.value[0].count = statistics.all_count
    tabsTitle.value[1].count = statistics.wait_count
    tabsTitle.value[2].count = statistics.dealing_count
    tabsTitle.value[3].count = statistics.complete_count
    tabsTitle.value[4].count = statistics.close_count
  })
}
initData()
const tabschange = (val: any) => {
  const item = tabsTitle.value[val-1]
  const params = {
    step: item.orderState
  }
  page_num.value = 1
  initData(params)
}

// 查看工单详情
const checkOrderDetail = (item: any) => {
  uni.navigateTo({
    url: `/subpkg/order_detail/index?id=${item.id}`
  })
}
const refreshData = (data: any) => {
  getOrderList({
    page_size: page_size.value, merchant_id: merchant_id.value, community_id: community_id.value,
    ...data
  }).then((res: any) =>{
    console.log('jp======列表数据',res)
    const __orderList = [...orderList.value]
    __orderList.push(...res.data.list)
    orderList.value = __orderList
    totalRows.value = res.data.total
    page_num.value = page_num + 1
    uni.stopPullDownRefresh()
  })
}
onReachBottom(() => {
  console.log('jp=======下拉刷新',orderList.value?.length, totalRows.value)
  let curPage: number = 0
  if(orderList.value?.length === totalRows.value) {
    uni.$showMsg('数据已全部加载完成！')
  } else {
    curPage = page_num.value + 1
    refreshData({page_num: curPage})
  }
})
</script>
<style lang="scss" scoped>
.repair_main{
  height: 100%;
}
  .repair_list{
    .repair_title{
      padding: 12px 10px 6px;
      .title_text{
        font-size: $cus-font-size-16;
        padding-right: 4px;
      }
      .title_sub_text{
        color: $cus-color-1;
        font-size: $cus-font-size-12;
      }
    }

    .order_list{
      padding: 0 10px;
      .order_list_head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 8px;
        border-bottom: 1px solid #F4F4F4;
      }
      .upload_file{
        padding-top: 8px;
      }
    }
    .no_data{
      padding-top:30px;
    }

  }
  //.tab_bar{
  //  :deep(.absolute tm-text .flex.text-view.nv text){
  //    color:#165DFF!important;
  //  }
  //}
</style>
<style lang="scss">
.tab_bar{
    .absolute.flex-top-start-end.r-0 {
      .noNvueBorder.round-6 {
        .text-view.nv {
          & > text {
            background: #E8F3FF;
            color: #165DFF!important;
          }
        }
      }

  }
}
</style>